import styles from './index.less';
import Auto from './addfile/auto'
import List from './home/list'
import ProTable from '@ant-design/pro-table';
import { DownOutlined } from '@ant-design/icons';
import { Button } from 'antd';

export default function IndexPage() {

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'time',
      dataIndex: 'time',
      valueType: 'date',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      valueType: 'select',
      filters: true,
      onFilter: true,
      valueEnum: {
        london: {
          text: '伦敦',
        },
        'New York': {
          text: '纽约',
        },
      },
    },
    {
      title: 'Action',
      key: 'action',
      sorter: true,
      valueType: 'option',
      render: () => [
        <a key="delete">Delete</a>,
        <a key="link" className="ant-dropdown-link">
          More actions <DownOutlined />
        </a>,
      ],
    },
  ];

  const genData = (total) => {
    if (total < 1) {
      return [];
    }
    const data = [];
    for (let i = 1; i <= total; i += 1) {
      data.push({
        key: i,
        name: 'John Brown',
        age: i + 10,
        time: Date.now(),
        address: i % 2 === 0 ? 'london' : 'New York',
        description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
      });
    }
    return data;
  };

  const expandedRowRender = () => {
    const data = [];
    for (let i = 0; i < 3; i += 1) {
      data.push({
        key: i,
        date: '2014-12-24 23:12:00',
        name: 'This is production name',
        upgradeNum: 'Upgraded: 56',
      });
    }
    return (
      <ProTable
        columns={[
          { title: 'Date', dataIndex: 'date', key: 'date' },
          { title: 'Name', dataIndex: 'name', key: 'name' },
          { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
          {
            title: 'Action',
            dataIndex: 'operation',
            key: 'operation',
            valueType: 'option',
            render: () => [<a key="Pause">Pause</a>, <a key="Stop">Stop</a>],
          },
        ]}
        headerTitle={false}
        search={false}
        options={false}
        dataSource={data}
        pagination={false}
      />
    );
  };

  const initData = {
    bordered: true,
    loading: false,
    pagination: {
      show: true,
      pageSize: 5,
      current: 1,
      total: 100,
    },
    size: 'small',
    expandable: { expandedRowRender },
    headerTitle: '高级表格',
    showHeader: true,
    rowSelection: {},
    scroll: false,
    hasData: true,
    tableLayout: undefined,
    toolBarRender: () => [
      <Button key="show">查看日志</Button>,
      <Button key="out">
        导出数据
        <DownOutlined />
      </Button>,
      <Button key="primary" type="primary">
        创建应用
      </Button>,
    ],
    dateValueType: 'date',
    search: {
      show: true,
      span: 12,
      collapseRender: true,
      labelWidth: 80,
      filterType: 'query',
      layout: 'horizontal',
    },
    options: {
      show: true,
      density: true,
      fullScreen: true,
      setting: true,
    },
  };



  return (
    <div>
      {/* <List/> */}
      {/* <Auto/> */}
      <ProTable
        {...initData}
        bordered
        headerTitle={'config.headerTitle'}
        columns={columns}
        dataSource={genData(15)}

      // toolBarRender={false}
      // search={false}
      />
    </div>
  );
}
